<template>
  <div>
    <BasicModal
      @register="register"
      :title="title"
      width="600px"
      :destroyOnClose="true"
      :canFullscreen="false"
      :showOkBtn="false"
      :showCancelBtn="false"
    >
      <BasicForm @register="registerForm">
        <template #num>
          <span>{{ checkedRows.length }}个</span>
          <Button type="link" size="small" @click="handleOpenInstitution">查看</Button>
        </template>

        <template #preview="{ model, field }">
          <ClipUploadImg v-model="model[field]" />
        </template>
      </BasicForm>
    </BasicModal>
    <InstitutionModal @register="registerInstitution" />
    <PublishError @register="registerPublishError" />
  </div>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '@/components/Form';
  import { Button } from '@/components/Button';
  import { ClipUploadImg } from '@/components/Upload/index';
  import InstitutionModal from './institutionModal.vue';
  import PublishError from '../../components/publishError.vue';
  import { useModal } from '@/components/Modal';
  import { ref } from 'vue';
  import { submitAudit } from '@/api/version';
  import { useMessage } from '@/hooks/web/useMessage';
  import { IVersionPageListResult } from '@/api/version/type';

  const title = ref('');
  const type = ref(1);
  const tenantIds = ref<number[]>([]);
  const checkedRows = ref<IVersionPageListResult[]>([]);
  const { createMessage } = useMessage();

  const emit = defineEmits(['reload']);

  const baseSchemas: FormSchema[] = [
    {
      field: 'userDesc',
      component: 'InputTextArea',
      label: '版本描述',
      required: true,
    },
  ];

  const [registerForm, { validate, appendSchemaByField, setProps }] = useForm({
    schemas: [],
    autoFocusFirstItem: true,
    actionColOptions: {
      span: 24,
    },
    labelWidth: 120,
    baseColProps: { span: 18 },
    submitButtonOptions: {
      text: '确认',
    },
    resetButtonOptions: {
      text: '取消',
    },
    submitFunc: async () => {
      const data = await validate();
      console.log(data);
      setProps({
        submitButtonOptions: {
          loading: true,
        },
      });
      try {
        let res = await submitAudit({
          tenantIds: tenantIds.value,
          userDesc: data.userDesc,
          userVersion: data.expVersion,
        });
        setProps({
          submitButtonOptions: {
            loading: false,
          },
        });
        if (res && res.length) {
          return openPublishErrorModal(true, {
            list: res,
          });
        }
        createMessage.success('提交成功！');
        emit('reload');
        closeModal();
      } catch (error) {
        setProps({
          submitButtonOptions: {
            loading: false,
          },
        });
      }
    },
    resetFunc: async () => {
      closeModal();
    },
  });

  const [register, { closeModal }] = useModalInner((data) => {
    console.log('data--->', data);
    type.value = data.type;
    let row = data.row;
    title.value = (data.type === 2 ? '批量' : '') + '提交审核';

    let schemas: FormSchema[] = [];
    if (data.type === 1) {
      tenantIds.value = [data.row.tenantId] as any;
      schemas = [
        {
          field: 'organizationName',
          component: 'Input',
          label: '机构名称',
          componentProps: { disabled: true },
          defaultValue: row.organizationName,
        },
        {
          field: 'wechatAppName',
          component: 'Input',
          label: '小程序名称',
          componentProps: { disabled: true },
          defaultValue: row.wechatAppName,
        },
        {
          field: 'releaseVersion',
          component: 'Input',
          label: '当前版本',
          componentProps: { disabled: true },
          defaultValue: row.releaseVersion,
        },
        {
          field: 'expVersion',
          component: 'Input',
          label: '提审版本',
          componentProps: { disabled: true },
          defaultValue: row.expVersion,
        },
        ...baseSchemas,
        // { field: 'type', component: 'Upload', label: '图片预览', slot: 'preview' },
        // // { field: 'type', component: 'Upload', label: '视频预览' },
        // {
        //   field: 'type',
        //   component: 'RadioGroup',
        //   label: '加急审核',
        //   componentProps: {
        //     options: [
        //       { label: '不加急', value: '1', key: '1' },
        //       { label: '加急', value: '2', key: '2' },
        //     ],
        //   },
        //   itemProps: {
        //     extra:
        //       '选择不加急审核，预计在1-7天内完成审核。若代码中包含较复杂逻辑或其他特殊情况，可能会导致审核时间延长。',
        //   },
        // },
      ];
    } else {
      checkedRows.value = row;
      tenantIds.value = checkedRows.value.map((v) => v.tenantId);
      schemas = [
        { field: 'num', component: 'Input', label: '机构数量', slot: 'num' },
        {
          field: 'expVersion',
          component: 'Input',
          label: '提审版本',
          componentProps: { disabled: true },
          defaultValue: row[0].expVersion,
        },
        ...baseSchemas,
        // { field: 'type', component: 'Select', label: '辅助素材' },
      ];
    }

    schemas.forEach((item) => {
      appendSchemaByField(
        {
          ...item,
        },
        '',
      );
    });
  });

  const [registerInstitution, { openModal }] = useModal();
  const [registerPublishError, { openModal: openPublishErrorModal }] = useModal();

  function handleOpenInstitution() {
    openModal(true, {
      list: checkedRows.value.map((v) => v.organizationName),
    });
  }
</script>

<style lang="less" scoped></style>
